<script lang="ts">
import ListLogic from "./ListLogic"

export default ListLogic
</script>
<template>
  <div class="image-list">
    <div class="image-item" v-for="(res,index) in data" :key="index" @click="choiceRes(res)">
      <div class="image-box" :class="{active:active.indexOf(res.id)>-1}">
        <el-image loading="lazy" lazy :src="res.url" :alt="res.name"/>
      </div>
      <div class="image-tool">
        <app-icon name="Edit" @click.stop="EditFileName(res)"></app-icon>
        <app-icon name="View" @click.stop="PreviewFile(res)"></app-icon>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
$item-width: 120px;
$item-height: 90px;

.image-list {
  display: grid;
  grid-template-columns: repeat(4, 120px);
  grid-gap: 5px;
  width: 498px;
  max-height: 480px;
  padding: 1px;

  .image-item {
    position: relative;
    width: $item-width;
    height: $item-height;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .image-box {
      position: absolute;
      left: 0;
      top: 0;
      width: $item-width;
      height: $item-height;
      overflow: hidden;

      &.active {
        box-shadow: 0 0 0 1.5px var(--el-color-primary);
      }

      .el-image {
        width: $item-width;
        height: $item-height;
        position: absolute;
        left: 0;
        top: 0;
      }
    }

    .image-tool {
      display: none;
      position: absolute;
      right: 0;
      top: 0;
      width: $item-width;
      height: $item-height;
      background: rgb(0, 0, 0, 0.7);
      text-align: right;

      .app-icon {
        margin: 5px 5px 0 0;
        color: #ffffff;
        font-size: 16px;
        cursor: pointer;
        mix-blend-mode: difference;
        line-height: 90px;

        &:hover {
          color: var(--el-color-primary);
        }
      }
    }

    &:hover {
      .image-tool {
        display: block;
      }
    }
  }
}
</style>